<template>
	<view class="radioGroup">
		<view class="option u-f-ac" v-for="(item,index) in optionList" :key="index" :class="[value===item.optionId?'select-border':'',$attrs.answer==item.optionId?'wrong-border':'',$attrs.answer&&item.optionRight?'right-border':'']" @click="radioChang(item.optionId)">
      <view  v-if="($attrs.answer&&item.optionRight)||$attrs.answer==item.optionId" :class="['check iconfont',$attrs.answer==item.optionId?'wrong-color icon-cuo':'',$attrs.answer&&item.optionRight?'right-color icon-duigou':'']"></view>
		  <view v-else class="check" :class="[value===item.optionId?'check-color':'']">{{item.optionId}}</view>
      
		  <view class="option-text">
        <jyf-parser :html="item.optionText" ref="article" v-if="item.optionText"></jyf-parser>
        <image :src="item.imageUrl" v-if="item.imageUrl" mode="aspectFit"></image>
      </view>
		</view>
	</view>
</template>

<script>
  // $attrs answer 自己填的答案  right 正确答案
	export default {
    props:{
      optionList:{
        type:Array,
        default:[]
      },
      // 是否启用点击状态
      disabled:{
        type:Boolean,
        default:false
      },
      value:{
        type:String,
        default:""
      }
    },
		data() {
			return {
        // answer:'',
        // right:''
			};
		},
    created() {
      // this.answer=this.$attrs.answer
      // this.right=this.$attrs.right
      console.log(this.$attrs,(this.$attrs.answer&&this.$attrs.right)=="A")
    },
    methods:{
      radioChang(e){
        if(!this.disabled){
         this.$emit('radioUiChange',e)
        }
        
      }
    }
	}
</script>

<style lang="scss">
.option{
     @include option
    }
.select-border{
    border-color:#00A0F0 !important;
  }
  .radioGroup .right-border{
    border-color:#38D253 !important;
  }
  .wrong-border{
    border-color:#F55555 !important;
  }
</style>
